<template>
  <div class="app-container">
    <!-- 查询工具栏 -->
    <div class="search-div">
      <el-form :inline="true" size="small">
        <el-form-item label="关键字">
          <el-input v-model="queryParams.keyword" placeholder="请输入关键字" clearable/>
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="queryParams.type" placeholder="请选择类型" clearable>
            <el-option label="入库" value="1"/>
            <el-option label="出库" value="2"/>
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker
            v-model="queryParams.createTimeRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 分页表格 -->
    <el-table
      :data="tableData"
      stripe
      border
      style="width: 100%; margin-top: 20px;"
    >
      <el-table-column prop="type" label="类型" width="100">
        <template #default="scope">
          {{ scope.row.type === '1' ? '入库' : '出库' }}
        </template>
      </el-table-column>
      <el-table-column prop="numer" label="数量" width="100"/>
      <el-table-column prop="productId" label="产品ID" width="100"/>
      <el-table-column prop="orderId" label="订单ID" width="100"/>
      <el-table-column prop="createTime" label="创建时间" width="150"/>
      <el-table-column prop="typeLabelIds" label="类型标签ID" width="120"/>
      <el-table-column prop="productName" label="产品名称" width="150"/>
      <el-table-column prop="orderNo" label="单号" width="150"/>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
      style="margin-top: 20px; text-align: right;"
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="pageSize"
      :current-page="page"
      @current-change="handlePageChange"
    />
  </div>
</template>

<script>

import { getFlowPageList } from '@/api/storage'

export default {
  data() {
    return {
      tableData: [], // 表格数据
      total: 0, // 总条数
      pageSize: 10, // 每页显示条数
      currentPage: 1, // 当前页码
      queryParams: {
        keyword: '',
        type: '1',
        createTimeRange: []
      }
    }
  },
  methods: {
    // 获取表格数据
    fetchData(params) {
      getFlowPageList(this.currentPage, this.pageSize,params)
        .then(response => {
          this.list = response.data.records
          this.total = response.data.total
        })
    },
    // 处理分页变化
    handlePageChange(page) {
      this.currentPage = page
      this.handleSearch()
    },
    handleSearch() {
      const [createTimeBegin, createTimeEnd] = this.queryParams.createTimeRange || []
      const params = {
        keyword: this.queryParams.keyword,
        type: this.queryParams.type,
        createTimeBegin: createTimeBegin ? this.$moment(createTimeBegin).format('YYYY-MM-DD HH:mm:ss') : '',
        createTimeEnd: createTimeEnd ? this.$moment(createTimeEnd).format('YYYY-MM-DD HH:mm:ss') : ''
      }
      this.fetchData(params)
    }
  }
}
</script>
